<template>
  <div class="app-container">
    <el-scrollbar height="40vh">
      <div>
        <el-table v-loading="loadingM" :data="managerList">
          <el-table-column label="日期" align="center" prop="experimentDate"/>
          <el-table-column label="项目名称" prop="projectName"/>
          <el-table-column label="样品编号" prop="sampleName"/>
          <el-table-column label="实验名称" prop="experimentName"/>
          <el-table-column label="实验开始时间" prop="experimentDate" width="120px"/>
          <el-table-column label="实验要求完成时间" prop="experimentRequiredDate" width="150px"/>
          <el-table-column label="实验备注" prop="experimentRemark"/>
          <el-table-column label="操作" width="250px">
            <template #default="scope">
              <el-select v-model="scope.row.selectedJob"
                         :loading="loadingJobs"
                         style="width: 150px"
                         @click="doGetJob(scope.row.typeId)">
                <el-option v-for="job in jobs" :key="job.jobId" :label="job.jobName" :value="job.jobId"/>
              </el-select>
              <el-button style="margin-left: 5px" @click="doSetJob(scope.row.experimentId,scope.row.selectedJob)">分配</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-show="totalM>0"
            :total="totalM"
            v-model:page="queryParamsM.pageNum"
            v-model:limit="queryParamsM.pageSize"
            @pagination="getMList"
        />
      </div>
    </el-scrollbar>

    <el-scrollbar height="40vh">
      <div>
        <el-table v-loading="loading" :data="postList">
          <el-table-column label="岗位编号" align="center" width="260" prop="jobId" />
          <el-table-column label="岗位负责人" prop="jobName"/>
          <el-table-column label="实验统计" prop="sampleQuantity">
            <template #default="scope">
              <span>未完成实验{{scope.row.unFinish}}个</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" @click="toPostDetail(scope.row.jobId)" >岗位详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
        />
      </div>
    </el-scrollbar>

  </div>
</template>

<script setup>

import {getManagerList, getPostByType, getPosts, setJob} from "@/api/post/post.js";

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 5
  },
  queryParamsM: {
    pageNum: 1,
    pageSize: 5
  },
  rules: {
  }
});
const postList=ref([]);
const loading=ref(false);
const total=ref(0);

const { queryParams,queryParamsM, form, rules } = toRefs(data);
/** 管理员分配 */
const managerList=ref([]);
const loadingM=ref(false);
const totalM=ref(0);

function getMList(){
  loadingM.value = true;
  getManagerList(queryParamsM.value).then(response => {
    managerList.value = response.rows;
    totalM.value=response.total;
    loadingM.value = false;
  })
}
getMList();

const jobs=ref([]);
const selectedJob=ref();
const loadingJobs=ref(false);

function doGetJob(type){
  if (loadingJobs.value==true)
    return;
  loadingJobs.value=true;
  getPostByType(type).then(res=>{
    jobs.value = res.data;
    loadingJobs.value=false;
  })
}

function doSetJob(eid,jid){
  if(jid==null) return;
  setJob(eid,jid).then(res=>{
    getMList();
    getList();
  })
}

/** 查询项目列表 */
function getList() {
  loading.value = true;
  getPosts(queryParams.value).then(response => {
    postList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function toPostDetail(id){
  router.push({path:"/experiment/epexperiment",query:{jobId:id}});
}

getList();
</script>

<style scoped lang="scss">

</style>
